// 'zoom', 'fly'
require(['./config'], () => {
    require(['url', 'template', 'header', 'footer','zoom','fly'], (url, template) => {
      class Detail {
        constructor () {
          this.addToCart()
          this.showCartTotalNum()
          this.getData().then(resp => {
            this.showDetail(resp)
            this.zoom()
            
          })
        }
        getData () {
          // 从location拿到id，请求数据
          this.id = Number(window.location.search.slice(4))
          // 携带id向接口发请求
          return new Promise(resolve => {
            $.get(`${url.rapBaseUrl}/detail/get`, { id: this.id }, resp => {
              resolve(resp)
            })
          })
        }
        showDetail (resp) {
          console.log(resp)
          // 渲染模板引擎
          if (resp.code === 200) {
            // detail详情数据需要存下来为将来加购物车使用
            const { detail } = resp.body
            // rap2才需要在后面多写一个id，真实接口不需要
            // this.detail = detail
            this.detail = { ...detail, id: this.id }
            let html = template('detail-template', {
              ...this.detail
            })
            $('#detail').html(html)
          }
        }
        zoom () {
          // console.log($(".zoom-img").offset())
          // console.log($(".zoom-img").width())
          $(".zoom-img").elevateZoom({
            gallery: 'gal1', //ul父级盒子的id
            cursor: 'pointer',
            borderSize: '1',
            galleryActiceClass: 'active',
            borderColor: '#f2f2f2'
          })
        }
        addToCart () {
          // 为将来渲染进来的按钮绑事件，时间委托
          $('section').on('click', '#addToCart', e => {
            this.fly(e);
            // 把详情数据存进localStorage
            // 先判断购物车是否已经有数据
            let cart = localStorage.getItem('cart')
            if (cart) {
              // 说明购物车已经有数据了
              // 先把已有的数据拿到，然后再把当前这条数据加进去，最后重新存储覆盖之前的
              cart = JSON.parse(cart)
              console.log(cart)
              // 判断当前商品再购物车中是否已经存在
              const isExist = cart.some(shop => {
                return shop.id === this.id
              })
              if (isExist) {
                // 说明当前商品已经再购物车中存在了，找到这条商品，num加一
                cart = cart.map(shop => {
                  // 遍历cart，找到id相等的，num加一，其他的就不动
                  if (shop.id === this.id) shop.num++
                  return shop
                })
              } else {
                // 说明当前商品第一次加入购物车
                cart.push({ ...this.detail, num: 1, check: true })
              }
              localStorage.setItem('cart', JSON.stringify(cart))
            } else {
              // 购物车为空，咱们就构造一个只有当前这一条数据的数组存进去
              // 数量默认为1（也可以是输入的数量），check属性默认为true，刚加入的时候默认选中
              let arr = [{ ...this.detail, num: 1, check: true }]
              localStorage.setItem('cart', JSON.stringify(arr))
            }
  
          })
        }
        fly (e) {
          const _this = this
          $(`<img src="${this.detail.imgs[0]}" style="width:20px;height:20px">`).fly({
            start:{
              left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
              top: e.clientY,  //开始位置（必填）
            },
            end:{
              left: $('.shopCart').offset().left, //结束位置（必填）
              top: $('.shopCart').offset().top - $(window).scrollTop()  //结束位置（必填）
            },
            autoPlay: true, //是否直接运动,默认true
            speed: 1.1, //越大越快，默认1.2
            vertex_Rtop: 100, //运动轨迹最高点top值，默认20
            onEnd: function(){
              this.destroy()
              _this.showCartTotalNum()
            } //结束回调
          });
        }
        showCartTotalNum () {
          // 把localStorage取出来得到总数量
          let cart = localStorage.getItem('cart')
          let num = 0;
          if (cart) {
            cart = JSON.parse(cart)
            // 计算cart的总数量
            num = cart.reduce((res, shop) => {
              res += shop.num
              return res
            }, 0)
            $('#shopNum').html(num)
          }
        }
      }
      new Detail()
    })
  })